<template>
  <div class="">
    <div class="msg" v-if="isAuth">
    <HeaderSearch></HeaderSearch>
      <div class="tabs-wrapper">
        <van-tabs sticky color="#FFD500">
            <van-tab title="精选">
              <choiceness
                :SwiperImages="SwiperImages"
                :hotSearchList="hotSearchList"
                :recommendList="recommendList"
                ></choiceness>
            </van-tab>
            <van-tab title="送男友">
              <choiceness
                :SwiperImages="SwiperImages"
                :hotSearchList="hotSearchList"
                :recommendList="recommendList"
                ></choiceness>
            </van-tab>
            <van-tab title="送女友">
              <choiceness
                :SwiperImages="SwiperImages"
                :hotSearchList="hotSearchList"
                :recommendList="recommendList"
                ></choiceness>
            </van-tab>
            <van-tab title="送闺蜜">
              <choiceness
                :SwiperImages="SwiperImages"
                :hotSearchList="hotSearchList"
                :recommendList="recommendList"
                ></choiceness>
            </van-tab>
            <van-tab title="送长辈">
              <choiceness
                :SwiperImages="SwiperImages"
                :hotSearchList="hotSearchList"
                :recommendList="recommendList"
                ></choiceness>
            </van-tab>
        </van-tabs>
      </div>
  </div>
    <Auth v-if="!isAuth" @getUserInfo="init"></Auth>
  </div>
</template>

<script>
import HeaderSearch from '../../components/index/HeaderSearch'
import choiceness from '../../components/index/choiceness'
import Auth from '../../components/base/Auth'
import { getIndex } from '../../api/index'
import { getSetting, getUserInfo, setStorageSync, getStorageSync, getUserOpenId } from '../../api/weichat'
export default {
  components: {
    HeaderSearch,
    choiceness,
    Auth
  },
  data () {
    return {
      SwiperImages: [],
      hotSearchList: [],
      recommendList: [],
      isAuth: true
    }
  },
  methods: {
    getIndex () {
      getIndex().then((response) => {
        const {
          data: {
            SwiperImages,
            hotSearchList,
            recommendList
          }
        } = response.data
        this.SwiperImages = SwiperImages
        this.hotSearchList = hotSearchList
        this.recommendList = recommendList
        // console.log(this.SwiperImages, this.hotSearchList, this.recommendList)
      })
    },
    getUserInfo () {
      const getOpenIdComplete = (openId) => {
        this.getIndex()
      }
      getUserInfo((userInfo) => {
        setStorageSync('userInfo', userInfo)
        const openId = getStorageSync('openId')
        if (!openId || openId.length === 0) {
          getUserOpenId(getOpenIdComplete)
        } else {
          console.log('获取openId')
        }
      },
      () => {
        console.log('failed....')
      })
    },
    getSetting () {
      getSetting(
        'userInfo',
        () => {
          this.isAuth = true
          this.getUserInfo()
        },
        () => {
          this.isAuth = false
        }
      )
    },
    init () {
      this.getSetting()
    }
  },
  mounted () {
    this.getIndex()
    this.init()
  }
}
</script>

<style lang="scss" scoped>
.tabs-wrapper {
    width: 96%;
    margin: 0 auto;
}
.Auth {
}
</style>
